<template>
  <el-form label-width="5rem">
    <el-form-item label="成员">
      <CardDetailContent
        :users="users"
        :load-step="true"
        :selected-users="users"
        :show-submit="false"
      />
    </el-form-item>
    <el-form-item label="内容">
      <el-input v-model="data.content" type="textarea" autosize />
    </el-form-item>
    <el-form-item label="记录时间">
      <DatetimePicker
        v-model="data.recordTime"
        type="datetime"
        view="year"
        :color="theme"
        format="YYYY-MM-DD HH:mm:ss"
        locale="zh-cn"
        :locale-config="localeConfig"
      />
    </el-form-item>
    <el-form-item label="状态">
      <el-switch v-model="dataStatus" inactive-text="办理中" active-text="通过" />
    </el-form-item>
    <el-form-item label="授权码">
      <AuthCode :form.sync="auth" select-name="党员发展填报" />
    </el-form-item>
    <el-form-item>
      <el-button :loading="loading" type="success" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { parseTime } from '@/utils'
import localeConfig from '@/lang/locale-config'
import waves from '@/directive/waves'
import { submit, build_submit } from '@/api/zzxt/party-join'
export default {
  name: 'StepContent',
  components: {
    AuthCode: () => import('@/components/AuthCode'),
    CardDetailContent: () =>
      import('../JoinSteps/SingleStep/CardDetailContent'),
    DatetimePicker: () => import('vue-persian-datetime-picker')
  },
  directives: {
    waves
  },
  props: {
    step: { type: String, default: null },
    users: { type: Array, default: null }
  },
  data: () => ({
    loading: false,
    data: {
      content: '已办理当前进度事项\n已填写相关材料',
      recordTime: parseTime(new Date(Math.ceil(new Date() / 3600e3) * 3600e3)),
      conferenceId: null,
      status: 1
    },
    localeConfig,
    auth: {}
  }),
  computed: {
    dataStatus: {
      get() {
        return this.data.status === 1
      },
      set(val) {
        this.data.status = val ? 1 : 2
      }
    },
    theme() {
      return this.$store.state.settings.theme
    }
  },
  watch: {},
  methods: {
    submit() {
      if (this.loading) return
      this.loading = true
      const { users, auth } = this
      const { content, recordTime, conferenceId, status } = this.data
      const payloads = users.map(u => ({
        user: u,
        data: build_submit({ recordTime, conferenceId, content, status }),
        auth
      }))
      const actions = payloads.map(i =>
        submit(i).then(data => {
          console.log('complete', i)
        })
      )
      Promise.all(actions)
        .then(data => {
          this.$message.success(`已提交${actions.length}人的信息`)
        })
        .finally(() => {
          this.loading = false
        })
      this.$emit('requireRefresh')
    }
  }
}
</script>
